<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>766_注册</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
		<link rel="icon" href="${base}/favicon.ico" type="image/x-icon" />
		<link href="${base}/resources/mobile/css/style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="login_header content">
			<a href="${base}/pad/index.jhtml">
				<img src="${base}/resources/mobile/images/logo_b.png" alt="766" class="logo"/>
			</a>
			<span class="main_color">欢迎注册</span>
			<div class="right">
				<a href="${base}/pad/index.jhtml">返回首页</a>
				<a href="${base}/pad/login.jhtml">立即登录</a>
			</div>
		</div>
		<form id="padRegisterForm" action="submit.jhtml" method="post">
			<div class="login_con register_con content clearfix">
				<div class="left">
					<ul class="register_list">
						<li>
							<label for="userName"><span class="red">*</span>用户名:</label>
							<div>
								<input type="text" name="username" id="username"/>
							</div>
						</li>
						<li>
							<label for="password"><span class="red">*</span>密码:</label>
							<div>
								<input type="password" name="password" id="password" />
							</div>
						</li>
						<li>
							<label for="rePassword" ><span class="red">*</span>确认密码:</label>
							<div>
								<input type="password" name="rePassword" id="rePassword"/>
							</div>
						</li>
						<li>
							<label for="realName"><span class="red">*</span>姓名:</label>
							<div>
								<input type="text" name="realName" id="realName" />
							</div>
						</li>
						<li class="sex_row">
							<label>性别:</label>
							<div>
								<input type="radio" name="gender" id="men" value="1" checked="checked"/>
								<label for="men">男</label>
								<input type="radio" name="gender" value="0" id="women"/>
								<label for="women">女</label>
							</div>
						</li>
						<li class="region">
							<label for="region"><span class="red">*</span>地区:</label>
							<div>
								<div>
						 			<select class="option" name="provinceId">
									 	<option value="">--请选择--</option>
							 			[#list parentList as parentList]
							 				<option value="${parentList.id}">${parentList.name}</option>
										[/#list]
									 </select>
								</div>
								 <div>
									 <select class="option selectedCity" id="selectCity" name="cityId">
									 	<option value="">--请选择--</option>
									 </select>
								 </div>
								 <div>
									 <select class="option" name="areaId">
									 	<option value="">--请选择--</option>
									 </select>
								 </div>
							</div>
						</li>
						<li>
							<label for="address"><span class="red">*</span>地址:</label>
							<div>
								<input type="text" name="address" id="address" />
							</div>
						</li>
						<li>
							<label for="mobile"><span class="red">*</span>手机:</label>
							<div>
								<input type="text" name="mobile" id="mobile" />
							</div>
						</li>
					</ul>
				</div>
				<div class="right">
					<div class="agreement_text">${setting.registerAgreement}</div>
					<div>
						<input type="checkbox" name="agreement" id="agreement" value="" />
						<label for="agreement">我已阅读并同意遵守</label>
						<a href="" class="main_color">《766智能家用户协议》</a>
					</div>
				</div>
				<div class="sub_row">
					<button type="submit" class="_btn register_btn register_default" id="registerSub">确认注册</button>
				</div>
			</div>
		</form>
		[#include "/pad/include/footer.ftl" /]
	</body>
<script type="text/javascript" src="${base}/resources/public/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/jquery.lSelect.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/jquery.validate.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/jsbn.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/prng4.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/rng.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/rsa.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/base64.js"></script>
<script type="text/javascript" src="${base}/resources/mobile/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/shop/datePicker/WdatePicker.js"></script>
<script type="text/javascript">
$().ready(function(){
	$("#test").html($("#test").css("width"));
	var $registerForm = $("#padRegisterForm");
	var $submit = $("#registerSub");
	var $username = $("#username");
	var $password = $("#password");
	var $name = $("#name");
	var $gender = $("input[name='gender']");
	var $address = $("#address");
	var $mobile = $("#mobile");
	var $provinceId = $("select[name='provinceId']");
	var $cityId = $("select[name='cityId']");
	var $areaId = $("select[name='areaId']");
	var $agreement =$("#agreement");
	$agreement.on("change",function(){
		if($(this).is(":checked")){
			$submit.removeClass("register_default").attr("disabled",false);
		}else{
			$submit.addClass("register_default").attr("disabled",true);
		}
	});
	// 表单验证
	$registerForm.validate({
		rules: {
			username: {
				required: true,
				pattern: /^[0-9a-z_A-Z\u4e00-\u9fa5]+$/,
				minlength: ${setting.usernameMinLength},
				remote: {
					url: "${base}/pad/register/check_usernam_exist.jhtml",
					type:'POST',
					data:{
		                username:function(){return $("input[name='username']").val();}
		            },
					cache: false
				}
			},
			password: {
				required: true,
				pattern: /^[^\s&\"<>]+$/,
				minlength: ${setting.passwordMinLength}
			},
			rePassword: {
				required: true,
				equalTo: "#password"
			},
			realName:{
				required: true
			},
			provinceId: {
				required: true
			},
			cityId:　{
				required: true
			},
			address: {
				required: true,
				maxlength:50
			},
			mobile: {
				required: true
			}
		},
		messages: {
			username: {
				pattern: "${message("shop.register.usernameIllegal")}",
				remote: "${message("shop.register.disabledExist")}"
			},
			password: {
				pattern: "${message("shop.register.passwordIllegal")}"
			}
		},
		submitHandler: function(form) {
			if($agreement.attr("checked") !="checked"){
				return false;
			}
			$.ajax({
				url: "${base}/common/public_key.jhtml",
				type: "GET",
				dataType: "json",
				cache: false,
				beforeSend: function() {
					$submit.prop("disabled", true);
				},
				success: function(data) {
					var rsaKey = new RSAKey();
					rsaKey.setPublic(b64tohex(data.modulus), b64tohex(data.exponent));
					var enPassword = hex2b64(rsaKey.encrypt($password.val()));
					var area = "";
					if($areaId.val() != null && $areaId.val() != ""){
						area = $areaId.val();
					}else if(($cityId.val() != null && $cityId.val() != "") && ($areaId.val() == null || $areaId.val() == "")){
						area = $cityId.val();
					}else if(($provinceId.val() != null && $provinceId.val() == "") && ($cityId.val() == null || $cityId.val() == "") && ($areaId.val() == null || $areaId.val() == "")){
						area = $provinceId.val();
					}
					$.ajax({
						url: $registerForm.attr("action"),
						type: "POST",
						data: {
							username: $username.val(),
							enPassword: enPassword,
							name:$name.val(),
							gender:$gender.val(),
							address:$address.val(),
							mobile:$mobile.val(),
							area:area
						},
						dataType: "json",
						cache: false,
						beforeSend: function() {
							$submit.prop("disabled", true);
						},
						success: function(message) {
							$.message(message);
							if (message.type == "success") {
								setTimeout(function() {
									location.href = "${base}/pad/index.jhtml";
								}, 2000);
							}
						},
						error:function(err){
							$.message("error","请求失败！");
						},
						complete: function() {
							$submit.prop("disabled", false);
						}
					});
				}
			});
			return false;
		}
	});
	
	$("[name=provinceId]").change(function(){
		var provinceId = $(this).val();
        $("[name=cityId]").empty();
         $("[name=areaId]").empty();
		$.ajax({
		    url:"${base}/pad/register/getChildrenByParentId.jhtml",    //请求的url地址
		    dataType:"json",   //返回格式为json
		    data:{"provinceId":provinceId},    //参数值
		    type:"GET",   //请求方式
		    success:function(req){
		        //请求成功时处理
		       var con ="<option value=''>--请选择--</option>";
		        $("[name=areaId]").append("<option value=''>--请选择--</option>");
		        for(var i=0;i<req.length;i++){
		        	con +="<option value='"+req[i].id+"'>"+req[i].name+"</option>";
		        }
		        $("[name=cityId]").append(con);
		    },
		    error:function(){
		        //请求出错处理
		    }
		});
	});
	$("[name=cityId]").change(function(){
		var provinceId = $(this).val();
        $("[name=areaId]").empty();
		$.ajax({
		    url:"${base}/pad/register/getChildrenByParentId.jhtml",    //请求的url地址
		    dataType:"json",   //返回格式为json
		    data:{"provinceId":provinceId},    //参数值
		    type:"GET",   //请求方式
		    success:function(req){
		        //请求成功时处理
		        var con ="<option value=''>--请选择--</option>";
		        if(req.length<1){
		        	$("[name=areaId]").remove();
		        }
		        for(var i=0;i<req.length;i++){
		        	con+="<option value='"+req[i].id+"'"+"info='"+req[i].fullName+"'>"+req[i].name+"</option>";
		        }
		        $("[name=areaId]").append(con);
		    },
		    error:function(){
		        //请求出错处理
		    }
		});
	});
});
</script>
</html>
